<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="Content-Language" content="en, english"/>
    <meta name="author" content="@sopu">
    <link rel="icon" type="image/png" href="/artwork/favicon.png">
    <title>Loklak wall - Masonry Layout</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/social_wall.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="/js/html5shiv.min.js"></script>
      <script src="/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div id="search">
        <div class="input-group input-group-lg" style="float:left">
          <input name="q" id="query" type="text"
                 class="center-block form-control input-lg"
                 title="Search Twitter and the loklak network"
                 placeholder="Search Twitter and the loklak network">
          <span class="input-group-btn">
          <button class="btn btn-lg btn-primary"
                  id="search-but" type="button">
          Search Twitter
          </button>
          </span>
        </div>
    </div>


    <div id='loadingmessage' style='display:none'>
      <img src='./images/ajax-loader.gif'/>
    </div>

    <div id='masonry'>
    </div>

    <script type="text/x-handlebars" id="feeds">
        <div class="item card radius shadowDepth1" data-link="{{link}}">
          <div class="card__action">
            <div class="card__author">
              <img class="profile" src="{{user.profile_image_url_https}}" alt="user">
              <span class="card__author-content"
                    data-author-link="https://twitter.com/{{screen_name}}">
                @{{screen_name}}
              </span>
            </div>
          </div>

          {{#if images}}
            {{#if images_count}}
              <div class="card__image border-tlr-radius">
                <img src="{{images.[0]}}" alt="image" class="border-tlr-radius">
              </div>
            {{/if}}
          {{/if}}

          <div class="card__content card__padding">
            <article class="card__article">
              <p>{{text}}</p>
            </article>
          </div>

          <div class="card__padding_1 card__meta">

            <span class="twitter_meta">
              <img class="twitter_img retweet" src="./images/retweet.png" alt="fav">
              {{retweet_count}}
            </span>

            <span class="twitter_meta">
              <img class="twitter_img fav" src="./images/favourite.png" alt="fav">
              {{favourites_count}}
            </span>

            <time>{{prettify created_at}}</time>
          </div>

        </div>
      </script>

    <script src="js/moment.min.js"></script>
    <script src="js/masonry.pkgd.js"></script>
    <script src="js/imagesLoad.min.js"></script>
    <script src="../../js/jquery.min.js"></script>
    <script src="js/handlebars.min.js"></script>
    <script src="js/social_wall.js"></script>
  </body>
</html>

